<template>
  <div>
    <div class="fd-nav">
      <div class="fd-nav-left">
        <div class="fd-nav-back" @click="backFormProject"><i class="anticon anticon-left"></i></div>
        <div class="fd-nav-title" @click="backFormProject">工作流表单设计器</div>
      </div>
       <div class="fd-nav-center">
                <div class="fd-nav-container">
                    <div class="ghost-bar" style="transform: translateX(300px);"></div>
                    <div class="fd-nav-item" @click="menuSelectHandle('/project/workflow/form/editorWorkflow')" ><span class="order-num">1</span>流程表单</div>
                    <div class="fd-nav-item" @click="menuSelectHandle('/project/workflow/form/logicWorkflow')" ><span class="order-num">2</span>显示逻辑</div>
                    <div class="fd-nav-item active" @click="menuSelectHandle('/project/workflow/form/workflowDesign')" ><span class="order-num">3</span>流程设计</div>
                </div>
            </div>
      <div class="fd-nav-right">
        <button v-hasPermi="['releaseWorkflowProject']"  type="button" class="ant-btn button-publish" @click="saveSet"><span>发 布</span></button>
      </div>
    </div>
    <div class="fd-nav-content">
      <section class="dingflow-design">
        <div class="zoom">
          <div :class="'zoom-out'+ (nowVal==50?' disabled':'')" @click="zoomSize(1)"></div>
          <span>{{nowVal}}%</span>
          <div :class="'zoom-in'+ (nowVal==300?' disabled':'')" @click="zoomSize(2)"></div>
        </div>
        <div class="box-scale" id="box-scale" :style="'transform: scale('+nowVal/100+'); transform-origin: 50% 0px 0px;'">
          <nodeWrap :nodeConfig.sync="nodeConfig" :flowPermission.sync="flowPermission"></nodeWrap>
          <div class="end-node">
            <div class="end-node-circle"></div>
            <div class="end-node-text">流程结束</div>
          </div>
        </div>
      </section>
    </div>
    <errorDialog
      :visible.sync="tipVisible"
      :list="tipList"
    />
    <promoterDrawer />
    <approverDrawer/>
    <copyerDrawer />
    <conditionDrawer />
  </div>
</template>
<script>
  import errorDialog from '@/components/DuoJuHe/workflow/errorDialog'
  import promoterDrawer from '@/components/DuoJuHe/workflow/drawer/promoterDrawer'
  import approverDrawer from '@/components/DuoJuHe/workflow/drawer/approverDrawer'
  import copyerDrawer from '@/components/DuoJuHe/workflow/drawer/copyerDrawer'
  import conditionDrawer from '@/components/DuoJuHe/workflow/drawer/conditionDrawer'
  import {queryWorkflowProcessConfig, releaseWorkflowProject} from '@/api/workflow/workflowProject'

  import { mapMutations } from 'vuex'
  export default {
    components:{
      errorDialog,
      promoterDrawer,
      approverDrawer,
      copyerDrawer,
      conditionDrawer
    },
    data() {
      return {
        projectId: null,
        tipList: [],
        tipVisible: false,
        nowVal: 100,
        processConfig: {},
        nodeConfig: {},
        workFlowName: "",
        flowPermission: [],
      };
    },
    created() {
      this.projectId = this.$route.query.key
      queryWorkflowProcessConfig({projectId:this.projectId}).then(res => {
        if (res&&res.errorCode === 0) {
          this.processConfig = res.data;
          let {nodeConfig,flowPermission,workFlowName,projectId} = res.data
          this.nodeConfig = nodeConfig;
          this.flowPermission = flowPermission;
          this.workFlowName = workFlowName
          this.$store.commit('setProjectId', projectId)
        }
      })
    },
    methods: {
      ...mapMutations(['setProjectId','setIsTried']),

      backFormProject() {
        this.$router.replace({path:'/workflowAdmin/workflowModelAdmin'})
      },

      //跳转到项目
      menuSelectHandle(index) {
        this.$router.replace({path: index, query: {key: this.projectId}}).catch(err => err)
      },

      reErr({childNode}) {
        if (childNode) {
          let {type,error,nodeName,conditionNodes} = childNode
          if (type == 1 || type == 2) {
            if (error) {
              this.tipList.push({ name: nodeName, type: ["","审核人","抄送人"][type] })
            }
            this.reErr(childNode)
          } else if (type == 3) {
            this.reErr(childNode)
          } else if (type == 4) {
            this.reErr(childNode)
            //是否设置过默认条件，就是当条件都不满足的情况下执行的条件
            var defaultConditionNum = 0
            for (var i = 0; i < conditionNodes.length; i++) {
              let conditionNode = conditionNodes[i]
              if (conditionNode.error) {
                this.tipList.push({ name: conditionNode.nodeName, type: "条件" })
              }else {
                if (conditionNode.conditionList==null||conditionNode.conditionList.length===0){
                  defaultConditionNum++;
                }
              }
              this.reErr(conditionNode)
            }
            if (defaultConditionNum!==1&&conditionNodes.length>0){
              this.tipList.push({ name: "设置的条件分支中存在无法执行场景(条件都不满足或存在多个未设置条件分支)", type: "条件" })
            }
          }
        } else {
          childNode = null
        }
      },
      saveSet() {
        this.$store.commit('setIsTried', true)
        this.tipList = [];
        this.reErr(this.nodeConfig);
        if (this.tipList.length != 0) {
          this.tipVisible = true;
          return;
        }
        this.$confirm('工作流发布后不可修改，你确定要发布?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
         //beg
          this.processConfig.flowPermission = this.flowPermission;
          releaseWorkflowProject(this.processConfig).then(res => {
            if (res&&res.errorCode === 0) {
              this.$message.success("流程发布成功！");
              this.backFormProject();
            }
          })
          //end
        }).catch(() => { });
      },
      zoomSize(type) {
        if (type == 1) {
          if (this.nowVal == 50) {
            return;
          }
          this.nowVal -= 10;
        } else {
          if (this.nowVal == 300) {
            return;
          }
          this.nowVal += 10;
        }
      }
    }
  };
</script>
<style>
  @import "~@/assets/styles/workflow/workflow.css";
  .error-modal-list {
    width: 455px;
  }
</style>
